<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <!--        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
                <link rel="stylesheet" href="assets/css/ace.min.css" />-->
    </head>
    <style>        
        /*ul{display: block; list-style: none;width: 200px;}*/
        .nav .nav{padding-left: 25px;}
    </style>
    <body>
        <div class="navigation">

        </div>
        <script src="assets/js/jquery.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/data/nav.js"></script>
        <script>
            var clickParentNode = function(e) {
                console.log(e.data.data.name + "等级" + e.data.data.level);
                $(this).nextAll("ul").toggle();
                $(this).parent().siblings().children(".nav").hide();
            }
            var clickChildrenNode = function(e) {
                console.log(e.data.data.name + "等级" + e.data.data.level)
                $(this).parent().siblings().children(".nav").hide();
            }
            function initNav(obj, data, level) {
                var $navDom = $("<ul class='nav'></ul>");
                for (var i in data) {
                    var name = data[i].name;
                    var children = data[i].children;
                    data[i].level = level;
                    var $li = $("<li class='level" + level + "'></li>")
                    var $a = $("<a>" + name + "</a>")
                    $li.append($a);
                    if (children.length > 0) {
                        $a.bind("click", {data: data[i]}, clickParentNode);
                        initNav($li, children, level + 1);
                    } else {
                        $a.bind("click", {data: data[i]}, clickChildrenNode);
                    }
                    $navDom.append($li);
                }
                obj.append($navDom);
            }
            $(function() {
                initNav($(".navigation"), nav, 1);
            })
        </script>
    </body>
</html>
